<template>
  <view class="container">
    <u-navbar
      :is-fixed="false"
      :border-bottom="false"
      :is-back="false"
      back-icon-name="arrow-leftward"
      title="注册"
      :background="{ background: '#fff' }"
      title-color="#000000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="content">
      <u-form :model="form" ref="uForm" :label-width="150">
        <u-form-item label="用户名"
          ><u-input v-model="form.username" placeholder="字母、数字，6-12位"
        /></u-form-item>
        <u-form-item label="密码">
          <u-input
            v-model="form.password"
            placeholder="字母、数字，6-12位"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
        <u-form-item label="确认密码">
          <u-input
            v-model="form.password2"
            placeholder="请再次输入密码"
            type="password"
            :password-icon="true"
          />
        </u-form-item>
        <u-form-item label="姓名"
          ><u-input v-model="form.realname" placeholder="请输入真实姓名"
        /></u-form-item>
				<u-form-item label="手机号" prop="phone" 
          ><u-input v-model="form.phone"
        /></u-form-item>
				<u-form-item label="证件类型">
          <u-input v-model="form.cardtype" placeholder="请选择" type="select" @click="showType = true" />
          <u-action-sheet
            :list="typeList"
            v-model="showType"
            @click="chooseType"
          ></u-action-sheet>
        </u-form-item>
				<u-form-item label="证件号码"
          ><u-input v-model="form.cardno" placeholder="请输入证件号码"
        /></u-form-item>
        <u-form-item label="旅客类型">
          <u-input v-model="form.pType" placeholder="请选择" type="select" @click="showType2 = true" />
          <u-action-sheet
            :list="typeList2"
            v-model="showType2"
            @click="chooseType2"
          ></u-action-sheet>
        </u-form-item>
      </u-form>
      <button class="submit" @click="submit">注册</button>
				<view @click="login" class="register">返回登录</view>
    </view>
  </view>
</template>

<script>
import { register, addPass } from '../../api/system/api'
import moment from 'moment';
export default {
  onLoad(option) {
    const { redirect } = option;
    if (redirect) this.redirect = redirect;
  },
  data() {
    return {
      form: {
        username: "",
        password: "",
        password2: "",
        realname: "",
				email: '',
				phone: '',
				cardtype: '',
				cardno: '',
				pType: ''
      },
			rules: {
				phone: [{
					max: 11,
					message: '手机号不能超过11位',
					trigger: 'change'
				}]
			},
      showSex: false,
      showType: false,
      showType2: false,
			typeList: [
				{
          text: "中国居民身份证",
        },
				{
          text: "港澳居民来往内地通行证",
        },
				{
          text: "台湾居民来往大陆通行证",
        },
				{
          text: "护照",
        },
			],
			typeList2: [
				{
          text: "成人",
        },
				{
          text: "儿童",
        },
				{
          text: "学生",
        },
				{
          text: "残军",
        },
			],
      sexList: [
        {
          text: "男",
        },
        {
          text: "女",
        }
      ],
    };
  },
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
  methods: {
    submit() {
      if (!this.form.username) {
				this.$refs.uToast.show({
					title: '请输入用户名',
					type: 'error',
				})
				return
			}
      if (!this.form.password) {
				this.$refs.uToast.show({
					title: '请输入密码',
					type: 'error',
				})
				return
			}
      if (!this.form.password2) {
				this.$refs.uToast.show({
					title: '请输入确认密码',
					type: 'error',
				})
				return
			}
      if (!this.form.realname) {
				this.$refs.uToast.show({
					title: '请输入姓名',
					type: 'error',
				})
				return
			}
      if (!this.form.phone) {
				this.$refs.uToast.show({
					title: '请输入姓名',
					type: 'error',
				})
				return
			}
      if (!this.form.cardtype) {
				this.$refs.uToast.show({
					title: '请选择证件类型',
					type: 'error',
				})
				return
			}
      if (!this.form.cardno) {
				this.$refs.uToast.show({
					title: '请输入证件号',
					type: 'error',
				})
				return
			}
      if (!this.form.pType) {
				this.$refs.uToast.show({
					title: '请选择旅客类型',
					type: 'error',
				})
				return
			}
      let reg = /^(\w){6,12}$/;
      if (!reg.test(this.form.username)) {
        this.$refs.uToast.show({
					title: '用户名不符合规则',
					type: 'error',
				})
				return
      }
      if (!reg.test(this.form.password)) {
        this.$refs.uToast.show({
					title: '密码不符合规则',
					type: 'error',
				})
				return
      }
      if (this.form.password !== this.form.password2) {
				this.$refs.uToast.show({
					title: '两次密码不一致',
					type: 'error',
				})
				return
      }
      let reg2 = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
      if (!reg2.test(this.form.phone)) {
        this.$refs.uToast.show({
					title: '手机号不符合规则',
					type: 'error',
				})
				return
      }
      // 身份证的正则
      let flag = true
      if (this.form.cardtype === '中国居民身份证') {
        flag = this.idCard(this.form.cardno)
      } else if (this.form.cardtype === '港澳台居民来往内地通行证') {
        flag = this.idCardGA(this.form.cardno)
      } else if (this.form.cardtype === '台湾居民来往大陆通行证') {
        flag = this.idCardTW(this.form.cardno)
      } else if (this.form.cardtype === '护照') {
        flag = this.idCardHZ(this.form.cardno)
      }
      if (!flag) {
        this.$refs.uToast.show({
					title: '请输入正确的证件号码',
					type: 'error',
				})
				return
      }
      let diff = 0
      if (this.form.cardtype === '中国居民身份证') {
          let ymd = this.form.cardno.slice(6, 14)
          diff = moment().diff(moment(`${ymd.slice(0, 4)}-${ymd.slice(4, 6)}-${ymd.slice(6, 8)}`), 'year')
      }
      if (this.form.pType === '儿童') {
        // 如果是儿童 需加一层判断
        // 1、如果选的是身份证  需要判断身份证的年龄是不是正确
        if (this.form.cardtype === '中国居民身份证') {
          if (diff > 12) {
            this.$refs.uToast.show({
              title: '您已超过儿童票年龄上限，12周岁，请重新选择！',
              type: 'error',
            })
            return
          }
          if (diff < 6) {
            this.$refs.uToast.show({
              title: '儿童票的年龄下限是6周岁，你无须买票~',
              type: 'error',
            })
            return
          }
        } else {
          this.$refs.uToast.show({
            title: '请重新选择证件类型，非中国居民暂时无法使用儿童票~',
            type: 'error',
          })
        }
      } else if (this.form.pType === '成人') {
        if (diff <= 12) {
          this.form.pType = '儿童'
        }
      }
      let form = JSON.parse(JSON.stringify(this.form))
      delete form.password2
      form.cardtype = this.typeList.findIndex(v => v.text === this.form.cardtype)
      form.pType = this.typeList2.findIndex(v => v.text === this.form.pType)
      register(form).then(res => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '注册成功~',
            type: 'success',
          })
          // 同时还需要往passanger表里插一条本人的数据
          addPass({
            cardtype: form.cardtype,
            phone: form.phone,
            self: 'true', // 本人
            cardno: form.cardno,
            pType: form.pType,
            examine: form.pType == 1 ? 'true' : 'false',
            choose: 'false',
            pics: '[]',
            userid: res.data.id,
            realname: form.realname
          }).then(res => {

          })
			    this.$u.route('/pages/interest/login')
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error',
          })
        }
      })
      // uni.switchTab({ url: "/pages/home/home" });
    },
    handleInputCheck() {
      this.disabled = false;
    },
    chooseSex(index) {
      this.form.sex = this.sexList[index].text;
    },
    chooseType(index) {
      this.form.cardtype = this.typeList[index].text;
    },
    chooseType2(index) {
      this.form.pType = this.typeList2[index].text;
    },
    login() {
			this.$u.route('/pages/interest/login')
    },
    idCard(value) {
      return /^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(
        value)
    },
    idCardGA(value) {
      return /^[H|M]\\d{10}|^[H|M]\\d{6}$/.test(
        value)
    },
    idCardGTW(value) {
      return /^\\d{8}|^[a-zA-Z0-9]{10}|^\\d{18}$/.test(
        value)
    },
    idCardHZ(value) {
      return /^1[45][0-9]{7}|^[P|S]\\d{7}|^[S|G]\\d{8}$/.test(
        value)
    },
  },
};
</script>

<style lang="scss">
.container {
  min-height: 100vh;
  overflow: hidden;

  .set-icon {
    vertical-align: middle;
    width: 41rpx;
    height: auto;
    margin-right: 35rpx;
  }
}

.content {
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  padding: 30rpx;
  height: 90vh;
  width: 100%;

  .top {
    width: 100%;
  }

  .logo {
    display: block;
    width: 281rpx;
    height: auto;
    margin: 0 auto 60rpx;
  }

  .cell {
    width: 100%;
    padding: 0 85rpx;
    box-sizing: border-box;
    margin-top: 36rpx;

    .name {
      font-size: 22rpx;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #3e4a59;
      line-height: 30rpx;
      opacity: 0.72;
    }

    .input-box {
      padding: 30rpx 0;
      border-bottom: 2rpx solid #f6f6f6;
      display: flex;
      align-items: center;

      .code {
        font-size: 22rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #0d0d0d;
        line-height: 30rpx;

        text {
          // color: #14b9c8;
          color: #5f88ff;
        }
      }

      .ipt {
        flex: 1;
        // height: 24rpx;
        font-size: 24rpx;
      }

      .hold {
        font-size: 26rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #3e4a59;
        line-height: 30px;
        opacity: 0.45;
      }
    }
  }

  .agree {
    margin: 27rpx 95rpx 0;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;

    .a {
      color: #000000;
    }
  }

  .submit {
    width: calc(100% - 60rpx);
    margin: 60rpx auto;
    border: none;
    height: 86rpx;
    line-height: 86rpx;
    box-sizing: border-box;
    border-radius: 15rpx;
    background-color: #5f88ff;
    color: #ffffff;

    &::after {
      content: none;
    }

    &::before {
      content: none;
    }

    &[disabled="true"] {
      background: #e4e4e4;
      font-size: 36rpx;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .register {
    width: 100%;
    text-align: center;
    margin-top: 20rpx;
  }

  .tip {
    margin-top: 30rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #cacaca;
    line-height: 34rpx;
  }

  .change {
    margin-top: 20rpx;
    text-align: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    // color: #14b9c8;
    color: #5f88ff;
    line-height: 34rpx;
  }

  .tag {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #9f9f9f;
    line-height: 34rpx;

    &::before {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }

    &::after {
      content: "";
      display: block;
      width: 160rpx;
      height: 1px;
      background: #d8d8d8;
      opacity: 0.86;
    }
  }

  .chat-arr {
    margin-top: 50rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .icon {
      width: 73rpx;
      height: 73rpx;
    }
  }
}

.register {
  width: 100%;
  text-align: center;
  margin-top: 20rpx;
}
</style>
